﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>手册管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/css/btable.css" />
    <script src="/static/js/inout/jquery-1.8.2.min.js"></script>
</head>

<body style=" background-color: gainsboro;">

<div style="margin:0px; background-color: white; margin:0 10px;">
    <blockquote class="layui-elem-quote">
        <button type="button" class="layui-btn layui-btn-small" id="add"><i class="fa fa-plus" aria-hidden="true"></i> 添加</button>
        <form class="layui-form" style="float: right" action="/admin/auth/selecsl" method="post" id="search">
            <div class="layui-form-item" style="margin:0;">
                
            </div>
            <div class="layui-form-item" style="margin:0;">
                <div class="layui-input-inline">
                    <div class="layui-input-inline">
                        <select name="group" id='groupid' lay-verify="" lay-filter="group" lay-search>
                            <option value="">请选择</option>
                            {volist name='data' id='dt'}
                            <optgroup label="{$dt.title}">
                                {volist name='dt.child' id='cdt'}
                                    <option value="{$cdt.id}"{eq name='dt.id' value='$fpid'}{eq name='cdt.id' value='$fid'}selected='selected'{/eq}{/eq}>{$cdt.title}</option>
                                {/volist}
                            </optgroup>
                            {/volist}
                        </select>
                    </div>
                </div>
                <div class="layui-input-inline">
                    <input type="text" name="title" placeholder="内容标题" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux" style="padding:0;">
                    <button lay-filter="search" class="layui-btn" lay-submit type="submit" id="sear"><i class="fa fa-search" aria-hidden="true"></i> 查询</button>
                </div>
            </div>
        </form>
    </blockquote>
    <div id="content" style="width: 100%;height: 533px;"></div>
</div>

<script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
<script>
    layui.config({
        base: '/static/js/',
        v: new Date().getTime()
    }).use(['btable', 'form'], function () {
        var btable = layui.btable(),
                $ = layui.jquery,
                layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
                layer = layui.layer,//获取当前窗口的layer对象;
                form = layui.form();

        btable.set({
            openWait: true,//开启等待框
            elem: '#content',
            url: '/admin/Adminmanual/getList', //数据源地址
            pageSize: 1000,//页大小
            params: {
                t: new Date().getTime(), //额外的请求参数
                group:$('#groupid').val()
            },
            columns: [{ //配置数据列
                fieldName: '标题', //显示名称
                field: 'title', //字段名
            }, {
                fieldName: '分类',
                field: 'manual_group',
                format: function (id, obj) {
                    return obj.manual_group.title;
                    //id
                    //行数据对象
                    //返回值：格式化的纯文本或html文本
                }
            },{
                fieldName: '排序',
                field: 'sort',
            }, {
                fieldName: '状态',
                field: 'status',
                format: function (val, obj) {
                    var str='';
                    if(obj.status == 1){
                        str='checked';
                    }
                    var html = '<form class="layui-form" action=""><input data-id='+val+' data='+obj.status+' type="checkbox" id="liststatus" lay-skin="switch" title="状态" lay-text="启用|禁用" lay-filter="status" '+str+'></status>';
                    return html;
                }
            },{
                fieldName: '操作',
                field: 'id',
                format: function (val,obj) {
                    if(obj.icon==null){
                        obj.icon = "";
                    }
                    var html = '<input type="button" value="修改" id="edit" class="layui-btn layui-btn-mini edit" data-id="'+obj.id+'" />'+
                            '<input type="button" value="删除" data-action="del" data-id="'+val+'" class="layui-btn layui-btn-mini layui-btn-danger del" name="del" />';
                    return html;
                }
            }],
            even: true,//隔行变色
            field: 'id', //主键ID
            //skin: 'row',
            checkbox: false,//是否显示多选框
            paged: true, //是否显示分页
            singleSelect: false, //只允许选择一行，checkbox为true生效
            onSuccess: function ($elem) { //$elem当前窗口的jq对象
                $elem.children('tr').each(function () {
                    $(this).children('td:last-child').children('input').each(function () {
                        var $that = $(this);
                        var action = $that.data('action');
                        var id = $that.data('id');
                        var names = $that.data('name');
                        var title = $that.data('title');
                        var icon = $that.data('icon');
                        var pid = $that.data('pid');
                        var navlevel = $that.data('navlevel');
                        var levt = $that.data('levt');
                        $that.on('click', function () {
                            switch (action) {
                                case 'del': //删除
                                    layer.confirm('确定要删除？', {
                                        btn: ['确定','取消'] //按钮
                                    }, function(){
                                        var id = $that.attr('data-id');
                                        $.ajax({
                                            type:"post",
                                            dataType: "json",
                                            url: "{:url('Adminmanual/del')}",
                                            data:{
                                                id:id
                                            },
                                            success:function(res){
                                                if(res.status==0){
                                                    layer.msg(res.msg,{icon: 1});
                                                    btable.render();
                                                }else{
                                                    layer.msg(res.msg,{icon: 1});
                                                }
                                            }
                                        });
                                    }, function(){

                                    });
                                    break;
                            }
                        });
                    });
                });
            }
        });
        btable.render();
        //监听搜索表单的提交事件
        form.on('submit(search)', function (data) {
            btable.get(data.field);
            return false;
        });
        form.on('select(group)', function(data){
            var data=$('#search').serialize();//获取值
            data= decodeURIComponent(data,true);//防止中文乱码
            var json=DataDeal.formToJson(data);//转化为json
            btable.get(JSON.parse(json));
            return false;
          });
          
          var DataDeal = {
            //将从form中通过$('#form').serialize()获取的值转成json
                formToJson: function (data) {
                    data=data.replace(/&/g,"\",\"");
                    data=data.replace(/=/g,"\":\"");
                    data="{\""+data+"\"}";
                    return data;
                 },
            };

        $(window).on('resize', function (e) {
            var $that = $(this);
            $('#content').height($that.height() - 92);
            
            $('#add').on('click', function() {
                    
                    //本表单通过ajax加载 --以模板的形式，当然你也可以直接写在页面上读取

                            var addBoxIndex = layer.open({
                                     area:["90%","100%"],
                                    type: 2,
                                    title: '添加手册内容',
                                    content: '{:url("Adminmanual/add")}',
                                    full: function(elem) {
                                            var win = window.top === window.self ? window : parent.window;
                                            $(win).on('resize', function() {
                                                    var $this = $(this);
                                                    elem.width($this.width()).height($this.height()).css({
                                                            top: 0,
                                                            left: 0
                                                    });
                                                    elem.children('div.layui-layer-content').height($this.height() - 95);
                                            });
                                    },
                                    success: function(layero, index) {
                           
                                            setTimeout(function(){
                                                    layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
                                                            tips: 3
                                                    });
                                            },500)
                                            //弹出窗口成功后渲染表单
                                            form.render();
                                    },
                                    end: function() {
                                            
                                    }
                            });
            });
         
            //修改状态
        form.on('switch(status)', function(data){
            var status = (this.checked ? 1: 2);
                    $.ajax({
                        type:"post",
                        dataType: "json",
                        url: '{:url("Adminmanual/editStatus")}',
                        data:{status:status,id:$(this).attr('data-id')},
                        success:function(res){
                            if(res.status==0){
                                layer.msg(res.msg);
                            }else{
                                layer.msg(res.msg);
                            }
                        }
                    });
              })
              
            $("body").on("click",".edit",function(){  //编辑
                var _self = $(this);
                var addBoxedit = layer.open({
                         area:["90%","100%"],
                        type: 2,
                        title: '修改手册内容',
                        content: '{:url("Adminmanual/edit")}?id='+_self.attr('data-id'),
                        full: function(elem) {
                                var win = window.top === window.self ? window : parent.window;
                                $(win).on('resize', function() {
                                        var $this = $(this);
                                        elem.width($this.width()).height($this.height()).css({
                                                top: 0,
                                                left: 0
                                        });
                                        elem.children('div.layui-layer-content').height($this.height() - 95);
                                });
                        },
                        success: function(layero, index) {
                            //layui.layer.full(addBoxedit);
                                setTimeout(function(){
                                        layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
                                                tips: 3
                                        });
                                },500)
                                //弹出窗口成功后渲染表单
                                form.render();
                        },
                        end: function() {

                        }
                });
            })
        
        
        }).resize();
        
        
        
        
        
    });
</script>
</body>
</html>